import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { OnChanges,SimpleChanges  } from '@angular/core';
declare let d3: any;

@Component({
  selector: 'app-charts-review',
  templateUrl: './chart-review.html',
  styleUrls: ['../../../../node_modules/nvd3/build/nv.d3.css'],
  encapsulation: ViewEncapsulation.None
})

export class ChartReviewComponent implements OnInit , OnChanges{
  options;
  data;

  private _ratings: any[] =[];
  private _reviews: any[] =[];
  private _notes: any[] =[];


  @Input() set ratings( param: any[]) {};
  @Input() set reviews ( param:any[]) {};
  @Input() set notes ( param:any[]) {};
  

  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
    //this.type = changes.type.currentValue;
    
      this._ratings.length = 0;
      changes.ratings.currentValue.forEach(element => {
        
              this._ratings.push({x: element.x, y: element.y});
            });

      this._reviews.length = 0;
      changes.reviews.currentValue.forEach(element => {
  
        this._reviews.push({x: element.x, y: element.y});
      });
    

    this.genOption();
  }

  ngOnInit() {
  }

  genOption( ) {

      this.data = [ {
        'values': this._reviews,
        'key': 'Reviews',
        'color': '#2ca02c',
        'yAxis':1,
        'type':'line'
      },

      {  
        'values': this._ratings,
        'key': 'Rating',
        'color': '#2ca02c',
        'yAxis':2,
        'type':'line'
      }
     ];
  
      this.options = {
        chart: {
          type: 'multiChart',
          height: 450,
          margin : {
            top: 20,
            right: 60,
            bottom: 40,
            left: 60
          },
  
          x: function(d){ return  d.x; },
          y: function(d){ return  d.y; },
          useInteractiveGuideline: true,
          xAxis: {
            axisLabel: 'Date',
  
            tickFormat: function(d){
              return d3.time.format('%m/%d/%Y')(new Date(d));
            },
          },
          yAxis1: {
            axisLabel: 'Review',
          },
          yAxis2: {
            axisLabel: 'Rating',
          }
        }
      };

    }
}
